import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { getChannelList } from '../../store/actions/channels'

export default function Channel () {
  const dispatch = useDispatch()
  const list = useSelector((state) => state.channels.list)
  const currentId = useSelector((state) => state.channels.currentId)
  useEffect(() => {
    dispatch(getChannelList())
  }, [dispatch])
  return (
    <ul className='catagtory'>
      {list.map((item) => (
        <li key={item.id} className={item.id === currentId ? 'select' : ''}>
          {item.name}
        </li>
      ))}
    </ul>
  )
}